@font-face {
  font-family: 'FontAwesome';
  src: url('themify/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('themify/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
      format('embedded-opentype'),
    url('themify/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
    url('themify/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
    url('themify/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (max-width: 980px) {
  /************************************************************************************
	STRUCTURE
	*************************************************************************************/
  .pagewidth,
  .full_width .themify_builder_row .row_inner {
    max-width: 94%;
  }

  /************************************************************************************
	GRID
	*************************************************************************************/
  .col4-1,
  .col4-2,
  .col4-3,
  .col3-1,
  .col3-2,
  .col2-1 {
    margin-left: 2%;
  }
  .col4-1 {
    max-width: 23%;
  }
  .col4-2,
  .col2-1 {
    max-width: 48%;
  }
  .col4-3 {
    max-width: 72%;
  }
  .col3-1 {
    max-width: 31%;
  }
  .col3-2 {
    max-width: 62%;
  }

  /************************************************************************************
	LAYOUTS
	*************************************************************************************/
  /* grid4 */
  .loops-wrapper.grid4 .post {
    width: 23.125%;
    margin-left: 2.5%;
  }

  /* grid3 */
  .loops-wrapper.grid3 .post {
    width: 31%;
    margin-left: 3.5%;
  }

  /* grid2 */
  .loops-wrapper.grid2-thumb .post,
  .loops-wrapper.grid2 .post {
    width: 48%;
    margin-left: 3.75%;
  }
}

@media screen and (max-width: 760px) {
  /************************************************************************************
	STRUCTURE
	*************************************************************************************/
  /* reset all to fullwidth */
  #contentwrap,
  #content,
  #sidebar-alt,
  #sidebar {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /************************************************************************************
	HEADER
	*************************************************************************************/
  /* reset absolute elements to static */
  #header .social-widget,
  #headerwrap #site-logo,
  #headerwrap #site-description,
  #headerwrap #main-nav {
    position: static;
    float: none;
    clear: both;
  }

  /* header */
  #header {
    height: auto !important;
  }

  /* header widget */
  .header-widget {
    position: static !important;
    float: none;
    text-align: left;
    clear: both;
    margin: 0;
  }
  .header-widget .widget {
    margin: 0 0 10px;
  }

  /* social widget */
  #header .social-widget {
    padding: 5px 0 0;
  }

  /* search form */
  #header #searchform {
    position: absolute;
    left: inherit;
    right: 0;
    width: 150px;
  }
  #header #searchform #s {
    float: right;
  }
  #header #searchform input#s:focus {
    width: 150px;
  }

  /* site logo */
  #site-logo {
    padding: 15px 100px 10px 0;
    margin: 0;
  }

  /* site description */
  #site-description {
    margin: 0 0 10px;
  }

  /************************************************************************************
	MAIN NAV
	*************************************************************************************/
  #headerwrap #main-nav {
    height: auto;
    padding: 10px 0 0;
  }
  #headerwrap #main-nav a {
    min-height: 0;
    padding: 0 10px 8px;
  }
  #headerwrap #main-nav a span {
    display: none;
  }

  /************************************************************************************
	FOOTER
	*************************************************************************************/
  .footer-nav-wrap,
  .footer-text {
    width: 100%;
    float: none;
    clear: both;
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
  /************************************************************************************
	LAYOUTS
	*************************************************************************************/
  /* grid4 */
  .loops-wrapper.grid4 .post,
  .sidebar1 .loops-wrapper.grid4 .post {
    width: 100%;
    margin-left: 0;
    float: none;
  }

  /* grid3 */
  .loops-wrapper.grid3 .post,
  .sidebar1 .loops-wrapper.grid3 .post {
    width: 100%;
    margin-left: 0;
    float: none;
  }
}

@media screen and (max-width: 480px) {
  /* disable webkit text size adjust (for iPhone) */
  html {
    -webkit-text-size-adjust: none;
  }

  /************************************************************************************
	GRID
	*************************************************************************************/
  .col4-1,
  .col4-2,
  .col2-1,
  .col4-3,
  .col3-1,
  .col3-2 {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  /************************************************************************************
	HEADER
	*************************************************************************************/
  /* site logo */
  #site-logo {
    font-size: 42px;
    text-align: left;
    padding-right: 90px;
    width: auto;
  }

  /* site description */
  #site-description {
    text-align: left;
    margin: 0 0 10px;
  }

  /* social widget */
  .social-widget {
    position: static !important;
    float: none;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0;
  }

  /* top nav */
  #top-nav {
    padding-right: 0;
  }
  #top-nav a {
    font-size: 85%;
    margin-right: 3px;
  }
  /************************************************************************************
	MOBILE NAV BUTTON
	*************************************************************************************/
  .mobile-button {
    position: relative;
    width: 32px;
    height: 30px;
    margin-bottom: 3px;
    margin-right: 3px;
    display: block;
    float: right;
    cursor: pointer;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .mobile-button:before {
    content: '\f0c9';
    font: normal 21px/1em FontAwesome;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.5em;
    width: 1em;
    height: 1em;
    text-align: center;
  }
  .mobile-button.active:before {
    color: #555;
  }

  /************************************************************************************
	MAIN NAV (MOBILE)
	*************************************************************************************/
  #main-nav-wrap {
    position: absolute;
    top: 20px;
    right: 0;
    z-index: 1000;
  }

  /* main nav */
  #headerwrap #main-nav {
    clear: both;
    position: static;
    width: 160px;
    z-index: 1000;
    padding: 10px 5px;
    background: #fff;
    border: solid 1px #999;
    display: none; /* visibility will be toggled with jquery */
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
  #headerwrap #main-nav li {
    clear: both;
    float: none;
    margin: 5px 0 5px 10px;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  #headerwrap #main-nav a,
  #headerwrap #main-nav ul a {
    font: inherit;
    text-transform: inherit;
    background: none;
    width: auto;
    display: inline;
    padding: 0;
    color: #666;
    border: none;
    text-shadow: none;
    box-shadow: none;
  }
  #headerwrap #main-nav a:hover,
  #headerwrap #main-nav ul a:hover {
    background: none;
    color: #000;
  }

  /* dropdown */
  #headerwrap #main-nav ul {
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /************************************************************************************
	SEARCH FORM
	*************************************************************************************/
  #searchform-wrap {
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 1000;
  }
  #search-icon:before {
    content: '\f002';
    font-size: 19px;
  }

  #header #searchform {
    clear: both;
    width: auto;
    width: 156px \0;
    position: static;
    overflow: hidden;
    background: #fff;
    border: solid 1px #999;
    padding: 5px;
    display: none; /* visibility will be toggled with jquery */
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  #header #searchform #s {
    background: #ddd !important;
    color: #444 !important;
    padding-left: 8px;
    width: 142px \0;
  }
  /************************************************************************************
	SLIDER
	*************************************************************************************/
  .slider {
    font-size: 90%;
  }

  /************************************************************************************
	LAYOUTS
	*************************************************************************************/
  /* post */
  .post {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  /* post title */
  .post-title {
    font-size: 2em !important;
  }

  /************************************************************************************
	POST NAV
	*************************************************************************************/
  .post-nav .prev,
  .post-nav .next {
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 10px;
  }

  /************************************************************************************
	COMMENTS
	*************************************************************************************/
  .commentlist {
    padding-left: 0;
  }
  .commentlist .commententry {
    clear: left;
  }
  .commentlist .avatar {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 10px 10px 0;
  }

  /* commentlist sub-levels */
  .commentlist ul,
  .commentlist ol {
    margin: 0 0 0 7%;
  }

  /************************************************************************************
	FOOTER
	*************************************************************************************/
  #footer-logo {
    position: static !important;
  }
  .footer-nav {
    padding: 0;
  }

  /************************************************************************************
	WOOCOMMERCE SUPPORT
	*************************************************************************************/
  .woocommerce #content div.product div.images,
  .woocommerce #content div.product div.summary {
    float: none !important;
    width: 100% !important;
  }
}
@media screen and (min-width: 481px) {
  /* ensure #nav and #searchform is visible on desktop version */
  #main-nav,
  #headerwrap #searchform {
    display: block !important;
  }
}